<template>
  <div style="padding: 10px">
    <div class="home-content">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-select v-model="params.net" placeholder="选择网络">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="params.passageway" placeholder="选择通道">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="params.organization" placeholder="选择组织">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form>
      <div style="margin-top: 30px">
        <el-button type="primary">区块高度</el-button>
        <el-button type="primary">交易数量</el-button>
        <el-button type="primary">TPS</el-button>
        <el-button type="primary">节点数量</el-button>
        <el-button type="primary">合约数量</el-button>
        <el-button type="primary">共识算法</el-button>
      </div>
      <div style="margin-top: 50px">
        <div id="sectorTwo"></div>
        <div id="sectorThree"></div>
        <div id="sector"></div>
      </div>
    </div>
  </div>
</template>

<script>
const optionCate = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
        },
    ],
}
const optionLine = {
    legend: {},
    tooltip: {
        trigger: 'axis',
        showContent: false,
    },
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
        ],
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
        },
    ],
}
export default {
    name: 't1',
    data() {
        return {
            params: {},
            options: [
                {
                    value: '选项1',
                    label: '网络1',
                },
                {
                    value: '选项2',
                    label: '网络2',
                },
                {
                    value: '选项3',
                    label: '网络3',
                },
                {
                    value: '选项4',
                    label: '网络4',
                },
                {
                    value: '选项5',
                    label: '网络5',
                },
            ],
            options2: [
                {
                    value: '通道1',
                    label: '通道1',
                },
                {
                    value: '通道2',
                    label: '通道2',
                },
                {
                    value: '通道3',
                    label: '通道3',
                },
                {
                    value: '通道4',
                    label: '通道4',
                },
                {
                    value: '通道5',
                    label: '通道5',
                },
            ],
            options3: [
                {
                    value: '选项1',
                    label: '组织1',
                },
                {
                    value: '选项2',
                    label: '组织2',
                },
                {
                    value: '选项3',
                    label: '组织3',
                },
                {
                    value: '选项4',
                    label: '组织4',
                },
                {
                    value: '选项5',
                    label: '组织5',
                },
            ],
            optionc: {
                title: {
                    text: '网络访问统计',
                    top: '5%',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' },
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{b} : {c}',
                                },
                                labelLine: { show: true },
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            },
        }
    },
    mounted() {
        this.echartLine()
        this.echartCate()
        let that = this
        let chart = that.$echarts.init(document.getElementById('sector'))
        chart.setOption(that.optionc)
        // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize', () => { chart.resize() })
    },
    methods: {
        echartLine() {
            let that = this
            let chart = that.$echarts.init(document.getElementById('sectorTwo'))
            chart.setOption(optionLine)
            // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', () => { chart.resize() })
        },
        echartCate() {
            let that = this
            let chart = that.$echarts.init(document.getElementById('sectorThree'))
            chart.setOption(optionCate)
            // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', () => { chart.resize() })
        },
    },
}
</script>

<style scoped>
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  width: 750px;
}
#sector {
  display: inline-block;
  width: 420px;
  height: 300px;
  margin: 0 auto;
}
#sectorTwo {
  display: inline-block;
  width: 420px;
  height: 300px;
  margin: 0 auto;
}
#sectorThree {
  display: inline-block;
  width: 420px;
  height: 300px;
  margin: 0 auto;
}
</style>